<template>
    <div class="subjectAdd">

        <Form :model="subject" :label-width="100">
            <!--课程封面-->
            <FormItem label="课程封面" style="margin-top: 10px">
                <Tooltip placement="right" theme="light">
                    <div slot="content">
                        <p>课程封面URL</p>
                        <p style="color: #F00">200个字符以内</p>
                    </div>
                    <Input prefix="ios-card-outline"
                           v-model="subject.subPic"
                           maxlength="200"
                           show-word-limit
                           placeholder="课程封面"
                           style="width: 1000px"
                           clearable/>
                </Tooltip>
            </FormItem>

            <!--课程社区-->
            <FormItem label="课程社区" style="margin-top: 20px">
                <Tooltip content="课程社区URL" placement="right" theme="light">
                    <Input prefix="ios-home-outline"
                           v-model="subject.subCommunityUrl"
                           placeholder="开发中..."
                           style="width: 1000px"
                           disabled
                           clearable/>
                </Tooltip>
            </FormItem>

            <!--课程标题-->
            <FormItem label="课程标题">
                <Tooltip content="20个字符以内" placement="right" theme="light">
                    <Input prefix="ios-calendar-outline"
                           v-model="subject.subName"
                           placeholder="课程标题"
                           maxlength="20"
                           show-word-limit
                           style="width: 500px"
                           clearable/>
                </Tooltip>
            </FormItem>
            <!--会员类型-->
            <FormItem label="会员类型" prop="vip">
                <RadioGroup v-model="subject.vip">
                    <Radio :label="1">会员</Radio>
                    <Radio :label="0">非会员</Radio>
                </RadioGroup>
            </FormItem>

            <!--课程评分-->
            <FormItem label="课程评分">
                <Tooltip content="0 - 5分" placement="right" theme="light">
                    <InputNumber
                            v-model="subject.subScore"
                            placeholder="课程评分"
                            style="width: 100px"
                            :max="5"
                            :min="0"
                            :step="0.1"
                            clearable></InputNumber>
                </Tooltip>
            </FormItem>


            <!--执教老师-->
            <FormItem label="执教老师">
                <FormItem v-for="(obj, i) in tchList"
                          :key="i">
                    <Row>
                        <Col span="1">
                        <Button size="small" type="error" @click="delTch(i)"> ×</Button>
                        </Col>

                        <Col span="18">
                        <Input type="text"
                               v-model="tchList[i]"
                               placeholder="老师姓名"
                               style="width: 150px;margin-left: -15px"></Input>
                        </Col>
                    </Row>
                </FormItem>
            </FormItem>

            <FormItem style="margin-top: -20px">
                <Button size="small" type="info" @click="addTch"> +</Button>
            </FormItem>


            <!--qq群-->
            <FormItem label="QQ群">
                <FormItem v-for="(obj, i) in qqList"
                          :key="i">
                    <Row>
                        <Col span="1">
                        <Button size="small" type="error" @click="delQQ(i)"> ×</Button>
                        </Col>

                        <Col span="18">
                        <Input type="text"
                               v-model="qqList[i]"
                               placeholder="QQ群"
                               style="width: 150px;margin-left: -15px"></Input>
                        </Col>
                    </Row>
                </FormItem>
            </FormItem>
            <FormItem style="margin-top: -20px">
                <Button size="small" type="info" @click="addQQ"> +</Button>
            </FormItem>

            <!--课程简介-->
            <FormItem label="课程简介" prop="subIntroduction">
                <Input clearble
                       style="width: 750px"
                       v-model="subject.subIntroduction"
                       maxlength="300"
                       type="textarea"
                       :autosize="{minRows: 2,maxRows: 5}"
                       placeholder="课程简介"
                       show-word-limit/>
            </FormItem>


            <FormItem>
                <Button type="primary" v-if="addSubBtnFlag" @click="insertSubject">新增课程</Button>
                <Button v-if="!addSubBtnFlag">新增课程</Button>
            </FormItem>

        </Form>
    </div>
</template>

<script>
    import {checkIsNull} from "@/tools/Null";

    export default {
        name: "",
        components: {},
        data() {
            return {
                //课程对象
                subject: {
                    //主键Id
                    subjectId: "",
                    //科目名称
                    subName: "",
                    //课程图片
                    subPic: "",
                    //课程社区url
                    subCommunityUrl: "",
                    //课程教师
                    subTeacher: "",
                    //qq群
                    qqGroup: "",
                    //课程简介
                    subIntroduction: "",
                    //课时总数
                    subTotal: "",
                    //课程评分，0-5，默认5分
                    subScore: 5.0,
                    //是否vip课程 默认0,非vip课程
                    vip: 0,
                    //显示排序
                    showOrder: "",
                    //状态  1在用  0失效
                    status: "",
                    //创建人id
                    createUser: "",
                    //创建时间
                    createTime: "",
                },
                //教师数组
                tchList: [""],
                //qq群
                qqList: [""],
                //新增课程按钮图标
                addSubBtnFlag: true
            }
        },
        methods: {
            //删除教师
            delTch: function (i) {
                this.tchList.delete(i)
                if (this.tchList.length == 0) {
                    this.tchList.push("")
                }
            },
            //添加教师
            addTch: function () {
                this.tchList.push("")
            },
            //删除QQ群
            delQQ: function (i) {
                this.qqList.delete(i)
                if (this.qqList.length == 0) {
                    this.qqList.push("")
                }
            },
            //添加QQ群
            addQQ: function () {
                this.qqList.push("")
            },
            //校验数组
            checkArray: function (arr) {
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].trim().length == 0) {
                        arr.delete(i)
                    }
                }
                if (arr.length == 0) {
                    return false
                }
                return true
            },
            //新增前校验数据
            checkData: function () {
                let flag = true;
                let b2 = checkIsNull(this.subject.subPic);
                if (b2) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '课程封面不能为空'
                    });
                    flag = false
                }
                let b3 = checkIsNull(this.subject.subName);
                if (b3) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '课程标题不能为空'
                    });
                    flag = false
                }
                let b = this.checkArray(this.tchList);
                if (!b) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '至少填写一个教师'
                    });
                    this.tchList.push("")
                    flag = false
                }
                let b1 = this.checkArray(this.qqList);
                if (!b1) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '至少填写一个QQ群'
                    });
                    this.qqList.push("")
                    flag = false
                }
                return flag
            },
            //组装数据  教师数组 转 字符串
            packArray: function (arr) {
                let str = "";
                for (let i = 0; i < arr.length; i++) {
                    str += arr[i]
                    str += ";"
                }
                let s = str;
                return s.substring(0, str.length - 1);
            },
            //新增课程
            insertSubject: function () {
                this.$Message.destroy();
                //校验数据
                let b = this.checkData();
                if (!b) {
                    return
                }
                //组装数据
                this.subject.subTeacher = this.packArray(this.tchList)
                this.subject.qqGroup = this.packArray(this.qqList)

                let data = {
                    subName: this.subject.subName,
                    subPic: this.subject.subPic,
                    subCommunityUrl: this.subject.subCommunityUrl,
                    subTeacher: this.subject.subTeacher,
                    qqGroup: this.subject.qqGroup,
                    subIntroduction: this.subject.subIntroduction,
                    subScore: this.subject.subScore,
                    vip: this.subject.vip,
                    createUser: this.$store.getters.getId,
                }
                this.axios.post(`/course/subject/subject`, data)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '课程添加成功'
                            });
                            this.subject = {
                                subScore: 5.0,
                                vip: 0,
                            }
                            this.tchList = [""]
                            this.qqList = [""]
                            this.$emit("course-add",true)
                        }
                    })
            }
        },
        mounted() {
        }
    }
</script>

<style scoped>

</style>